<template>
  <div class="calendar" ref="calendar" @click="changeRightMenu('close')">
    <div class="title">
      <a id="calendar-pre" @click="lastMonthHandle"
        >&lt;上月（{{ preMonth }}月）</a
      >
      <section>
        <label> {{ year }} 年</label>
        <label> {{ month }} 月</label>
      </section>
      <a id="calendar-next" @click="nextMonthHandle"
        >下月({{ nextMonth }})&gt;</a
      >
    </div>
    <calendar-table
      class="calendar-table"
      :weeksName="weeksName"
      :currDayNum="currDayNum"
      :rowLine="rowLine"
      :whichday="whichday"
      :lastMonthDay="lastResidueDay"
      :currMonthDayNum="days"
      :seleteDate="seleteDate"
      @moveAdd="moveAdd"
      @openRightMenu="openRightMenu"
      @dblclickHandle="dblclickHandle"
    >
      <slot></slot>
    </calendar-table>
    <calendar-menu
      @clickEvent="clickHandle"
      :position="menuOpt.position"
      :is-show="menuOpt.isShow"
    ></calendar-menu>
  </div>
</template>

<script>
import { weeks } from './data.js'
import CalendarTable from './CalendarTable.vue'
import CalendarMenu from './CalendarMenu.vue'
export default {
  name: 'Calendar',
  components: {
    CalendarTable,
    CalendarMenu,
  },
  computed: {
    preMonth() {
      return this.month === 1 ? 12 : this.month - 1 // 上个月
    },
    nextMonth() {
      return this.month === 12 ? 1 : this.month + 1 // 下个月
    },
    rowLine() {
      return Math.ceil((this.days + this.whichday) / 7)
    },
    whichday() {
      return this.monthDayWeek - 1
    },
    // 当月天数
    days() {
      const date = new Date()
      date.setFullYear(this.year, this.month, 0)
      return date.getDate() || 0
    },
    // 表示当月一号所在的是周几
    monthDayWeek() {
      const date = new Date()
      date.setFullYear(this.year, this.month - 1, 1)
      return date.getDay() || 7
    },
    lastMonthDays() {
      const date = new Date()
      date.setFullYear(this.year, this.month - 1, 0)
      return date.getDate() // 上个月天数
    },
    lastResidueDay() {
      return this.lastMonthDays - this.monthDayWeek + 2
    },
    currDayNum() {
      const date = new Date()
      if (date.getMonth() + 1 !== this.month) {
        return 0 // 假条件
      } else {
        return date.getDate()
      }
    },
  },
  data() {
    return {
      now: new Date(), //当前日期
      currday: new Date(),
      weeksName: weeks,
      month: '',
      year: '',
      seleteDate: [],
      menuOpt: {
        position: {
          x: 10,
          y: 10,
        },
        isShow: false,
      },
    }
  },
  mounted() {
    this.month = this.currday.getMonth() + 1
    this.year = this.currday.getFullYear()
  },
  methods: {
    lastMonthHandle() {
      this.month = this.preMonth
      this.currday.setMonth(this.nextMonth)
      if (this.month === 12) {
        this.year--
        //边界值判断
        this.currday.setFullYear(this.year - 1)
      }
    },
    nextMonthHandle() {
      this.month = this.nextMonth
      this.currday.setMonth(this.nextMonth)
      if (this.month === 1) {
        this.year++
        //边界值判断
        this.currday.setFullYear(this.year + 1)
      }
    },
    moveAdd(list) {
      const selectSet = new Set(this.seleteDate.concat(list))
      this.seleteDate = [...selectSet]
    },
    clickHandle(eventName) {
      console.log(eventName)
    },
    openRightMenu(mouse) {
      this.menuOpt.position = mouse
      this.changeRightMenu('open')
    },
    changeRightMenu(type) {
      this.menuOpt.isShow = type === 'open'
    },
    dblclickHandle(number) {
      console.log(number)
      const idx = this.seleteDate.indexOf(number)
      idx === -1 ? this.seleteDate.push(number) : this.seleteDate.splice(idx, 1)
      console.log(this.seleteDate)
    },
  },
}
</script>

<style lang="scss" scoped>
.calendar {
  width: 900px;
  height: 400px;
  .title {
    height: 50px;
    background-color: lightgreen;
    display: flex;
    align-items: center;
    justify-content: space-between;
    #calendar-pre {
      margin-right: 40px;
      cursor: pointer;
      transition: all 0.36s ease;
    }

    #calendar-pre:hover {
      font-size: 18px;
      margin-right: 30px;
      transition: all 0.36s ease;
    }

    #calendar-next {
      margin-left: 40px;
      cursor: pointer;
    }

    #calendar-next:hover {
      font-size: 18px;
      margin-left: 30px;
      transition: all 0.36s ease;
    }
  }
  .calendar-table {
    width: 100%;
    text-align: center;
    border: 1px solid #000;
  }
}
</style>
